<template>
  <el-container class="h-full">
    <side-menu></side-menu>
    <el-container style="calc(100% - 250px)">
      <el-header height="auto" class="page-header-container" :style="{padding: 0}">
        <header-breadcrumb></header-breadcrumb>
        <!--                <header-tags-nav></header-tags-nav>-->
        <el-page-header v-if="routeInfo.title!=='首页'" class="page-header-layout" @back="goBack"
                        :content="routeInfo.title"></el-page-header>
      </el-header>
      <el-main style="background: #f1f1f1">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import SideMenu from "@/layouts/components/side-menu";
import headerTagsNav from "@/layouts/components/header-tags-nav";
import HeaderBreadcrumb from "@/layouts/components/header-breadcrumb";

export default {
  name: "index",
  components: {HeaderBreadcrumb, SideMenu, headerTagsNav},
  data() {
    return {
      collapsed: false
    }
  },
  computed: {
    routeInfo() {
      let route = this.$route
      return route.meta
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.page-header-container {

}

.page-header-layout {
  line-height: 55px;
  padding-left: 20px;
  background: #e2e8f0;
  border-top: 1px solid #d7dde4;
  border-bottom: 1px solid #d7dde4;
  box-shadow: 0px 0 3px 2px rgba(100, 100, 100, 0.1) inset;
}
</style>
